<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>setup上下文对象</title>
    <style>
        .cls{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }

    </style>
</head>

<body>
    <div id="app">
        <input type="button" value="修改作者" @click="changeAuthor">
        <book class="cls" title="标题" name="三国演义" :author="author" @my-event="fn" >
            <template #default>
                <div>
                    default插槽
                </div>
            </template>
            <template #home>
                <div>
                    home插槽
                </div>
            </template>
        </book>
    </div>
</body>
<script src="./js/vue.global.js"></script>
<script>

    const { createApp, ref,computed,toRefs } = Vue

    let book = {
        props:["name","author"],
        emits:["my-event"],
        template:`            
                <h1>书籍组件</h1>
                <slot></slot>
                <div>
                    <p>书名：{{name}}</p>
                    <p>作者：{{author}}</p>
                </div>
                <slot name="home"></slot>
        `,
        setup(props,context){
            // context：就是上下文对象，attrs,slots,emit,expose
            console.log("context",context);            
            // 1、attrs是透传过来的属性
            // 2、slots：就是插槽
            // 3、emit：触发事件的函数
            // 4、expose：

            // =========================
            // 1、attrs：是透传过来的属性。选项式api中 this.$attrs.
            // console.log("context.attrs",context.attrs);
            // console.log("context.attrs.class",context.attrs.class);
            // console.log("context.attrs.title",context.attrs.title);

            // 2、slots:插槽;// 选项式api中的：this.$slot
            // console.log("context.slots",context.slots);
            // console.log("context.slots.default()",context.slots.default())
            // console.log("context.slots.home()",context.slots.home())

            // 3、emit();//选项式api中this.$emit()
            // context.emit("my-event","hello，我是子组件");


            // 4、expose();// 是组件对外开放的属性和方法，
            // 选项式api中，通过this.$refs.refName 可以拿到子组件（的this），那么，就可以直接访问子组件提供一切属性和方法。
            // 现在在组合式api中，expose可以限制对外开发子组件的哪些属性和方法。
            // 示例在demo06中。

        }
    }


    const app = createApp({
        components:{book},
        setup(){  

          let author = ref("罗贯中");

          function changeAuthor(){
            author.value +="1";
          }

          function fn(str){
            console.log("fn",str);
          }

          return {
            author,
            changeAuthor,
            fn
          }
        },
    })
    


    app.mount('#app')
</script>

</html>